<template>
  <input-group compact>
    <Input
      id="txt"
      v-model:value="curValue"
      :readonly="readonly"
      style="width: calc(100% - 32px)"
    />

    <tooltip title="复制">
      <Button @click="copy">
        <template #icon> <Icon icon="ant-design:copy-outlined" /></template>
      </Button>
    </tooltip>
  </input-group>
</template>

<script lang="ts" setup>
import { computed } from 'vue'

import { useMessage } from '@/hooks'
import { InputGroup, Input, Button, Tooltip } from 'ant-design-vue'

const emit = defineEmits(['update:value'])
const { createMessage } = useMessage()
const props = defineProps({
  value: { type: [String, Number], default: '' },
  readonly: { type: [Boolean], default: false },
})

const curValue = computed({
  get: () => (props.value ?? '').toString(),
  set: (value) => emit('update:value', value),
})

const copy = () => {
  navigator.clipboard.writeText(String(curValue.value)).then(
    function () {
      createMessage.success('已复制到剪切板')
    },
    function () {
      createMessage.warning('复制到剪切板失败')
    }
  )
}

defineExpose({})
</script>

<style lang="less" scoped></style>
